<template>
  <div class="api-detail p-4">
    <!-- 基本信息卡片 -->
    <div class="basic-info mb-6 bg-white p-4 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">基本信息</h2>
        <div class="flex space-x-2">
          <el-button type="primary" @click="handleEdit">
            <div class="i-carbon-edit mr-1"></div>编辑
          </el-button>
          <el-button 
            :type="apiInfo.status === 'active' ? 'warning' : 'success'"
            @click="handleToggleStatus"
          >
            <div class="i-carbon-power mr-1"></div>
            {{ apiInfo.status === 'active' ? '停用' : '启用' }}
          </el-button>
        </div>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="接口ID">{{ apiInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="接口名称">{{ apiInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="接口类型">{{ apiInfo.type }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ apiInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="最后修改时间">{{ apiInfo.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="apiInfo.status === 'active' ? 'success' : 'info'">
            {{ apiInfo.status === 'active' ? '启用' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="描述" :span="2">{{ apiInfo.description }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 运行配置 -->
    <div class="run-config mb-6 bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-medium mb-4">运行配置</h2>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="调度类型">{{ config.scheduleType }}</el-descriptions-item>
        <el-descriptions-item label="调度周期">{{ config.scheduleCycle }}</el-descriptions-item>
        <el-descriptions-item label="超时时间">{{ config.timeout }}分钟</el-descriptions-item>
        <el-descriptions-item label="重试次数">{{ config.retryCount }}次</el-descriptions-item>
        <el-descriptions-item label="数据源">{{ config.dataSource }}</el-descriptions-item>
        <el-descriptions-item label="目标库">{{ config.targetDb }}</el-descriptions-item>
        <el-descriptions-item label="SQL语句" :span="2">
          <el-input
            type="textarea"
            v-model="config.sql"
            rows="3"
            readonly
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 运行历史 -->
    <div class="run-history bg-white p-4 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">运行历史</h2>
        <el-button type="primary" @click="refreshHistory">
          <div class="i-carbon-refresh mr-1"></div>刷新
        </el-button>
      </div>
      <ArtTable
        :data="historyList"
        :loading="loading"
        :border="true"
        :stripe="true"
      >
        <el-table-column prop="id" label="执行ID" width="80" />
        <el-table-column prop="startTime" label="开始时间" width="180" />
        <el-table-column prop="endTime" label="结束时间" width="180" />
        <el-table-column prop="duration" label="耗时" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dataCount" label="数据量" width="100" />
        <el-table-column prop="message" label="执行信息" show-overflow-tooltip />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleViewLog(scope.row)">
              日志
            </el-button>
          </template>
        </el-table-column>
      </ArtTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 接口基本信息
const apiInfo = reactive({
  id: 1,
  name: '用户数据同步',
  type: 'HTTP',
  status: 'active',
  createTime: '2024-01-01 10:00:00',
  updateTime: '2024-01-20 15:30:00',
  description: '从CRM系统同步用户数据到数据仓库'
})

// 运行配置
const config = reactive({
  scheduleType: 'cron',
  scheduleCycle: '0 0 1 * * ?',
  timeout: 30,
  retryCount: 3,
  dataSource: 'CRM系统',
  targetDb: '数据仓库',
  sql: 'SELECT * FROM users WHERE update_time > #{lastSyncTime}'
})

// 加载状态
const loading = ref(false)

// 历史记录
const historyList = ref([
  {
    id: 1,
    startTime: '2024-01-20 15:30:00',
    endTime: '2024-01-20 15:35:00',
    duration: '5分钟',
    status: '成功',
    dataCount: '1000条',
    message: '同步完成'
  },
  {
    id: 2,
    startTime: '2024-01-19 15:30:00',
    endTime: '2024-01-19 15:33:00',
    duration: '3分钟',
    status: '成功',
    dataCount: '800条',
    message: '同步完成'
  }
])

// 获取状态标签类型
const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'danger' => {
  const statusMap: Record<string, 'success' | 'warning' | 'info' | 'danger'> = {
    '成功': 'success',
    '失败': 'danger',
    '运行中': 'warning'
  }
  return statusMap[status] || 'info'
}

// 编辑接口
const handleEdit = () => {
  ElMessage.success('打开编辑弹窗')
}

// 切换接口状态
const handleToggleStatus = () => {
  apiInfo.status = apiInfo.status === 'active' ? 'inactive' : 'active'
  ElMessage.success(`接口已${apiInfo.status === 'active' ? '启用' : '停用'}`)
}

// 刷新历史记录
const refreshHistory = () => {
  loading.value = true
  // TODO: 调用后端API获取最新历史记录
  setTimeout(() => {
    loading.value = false
    ElMessage.success('数据已更新')
  }, 1000)
}

// 查看日志详情
const handleViewLog = (log: any) => {
  ElMessage.success(`查看日志详情：${log.id}`)
}
</script>

<style scoped lang="scss">
.api-detail {
  :deep(.el-descriptions__label) {
    width: 120px;
  }
}
</style> 